<template>
  <div class="home-container">
    <!-- 顶部轮播图 -->
    <el-carousel height="400px" class="banner-carousel">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <div class="banner-item" :style="{ backgroundImage: `url(${item.image})` }">
          <h2>{{ item.title }}</h2>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 宠物展示区 -->
    <section class="section">
      <div class="section-header">
        <h2>🐕 热门宠物</h2>
        <el-button type="text" @click="$router.push('/user/pet-list')">查看更多 >></el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="pet in petList" :key="pet.id">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" class="pet-card">
            <img :src="pet.image" class="image">
            <div style="padding: 14px;">
              <h3>{{ pet.name }}</h3>
              <div class="pet-info">
                <span>品种：{{ pet.breed }}</span>
                <span class="price">¥{{ pet.price }}</span>
              </div>
              <el-button type="primary" size="small" style="width: 100%; margin-top: 10px;">
                查看详情
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 商品展示区 -->
    <section class="section">
      <div class="section-header">
        <h2>🛍 推荐商品</h2>
        <el-button type="text" @click="$router.push('/user/shop')">查看更多 >></el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="product in productList" :key="product.id">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" class="product-card">
            <img :src="product.image" class="image">
            <div style="padding: 14px;">
              <h3>{{ product.name }}</h3>
              <div class="product-info">
                <span class="price">¥{{ product.price }}</span>
                <el-button type="warning" size="mini" icon="el-icon-shopping-cart-2">
                  加入购物车
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 服务展示区 -->
    <section class="section">
      <div class="section-header">
        <h2>💆‍♀️ 宠物服务</h2>
        <el-button type="text" @click="$router.push('/user/service-reserve')">查看更多 >></el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="service in serviceList" :key="service.id">
          <el-card shadow="hover" class="service-card">
            <div class="service-icon">{{ service.icon }}</div>
            <h3>{{ service.name }}</h3>
            <p>{{ service.description }}</p>
            <div class="service-price">
              <span>¥{{ service.price }}</span>
              <el-button type="success" size="small">立即预约</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      banners: [
        { id: 1, title: '欢迎来到宠物管理系统', image: '' },
        { id: 2, title: '专业的宠物护理服务', image: '' },
        { id: 3, title: '优质的宠物商品', image: '' }
      ],
      petList: [],
      productList: [],
      serviceList: []
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData () {
      // 模拟数据
      this.petList = [
        { id: 1, name: '柯基犬', breed: '柯基', price: 3000, image: '' },
        { id: 2, name: '金毛犬', breed: '金毛', price: 2500, image: '' },
        { id: 3, name: '英短猫', breed: '英国短毛猫', price: 2000, image: '' },
        { id: 4, name: '布偶猫', breed: '布偶', price: 5000, image: '' }
      ]

      this.productList = [
        { id: 1, name: '狗粮', price: 199, image: '' },
        { id: 2, name: '猫粮', price: 168, image: '' },
        { id: 3, name: '宠物玩具', price: 59, image: '' },
        { id: 4, name: '宠物窝', price: 299, image: '' }
      ]

      this.serviceList = [
        { id: 1, name: '宠物洗澡', icon: '🛁', description: '专业宠物洗澡服务', price: 80 },
        { id: 2, name: '宠物美容', icon: '✂️', description: '造型设计美容服务', price: 150 },
        { id: 3, name: '宠物训练', icon: '🎓', description: '行为训练服务', price: 300 },
        { id: 4, name: '宠物寄养', icon: '🏠', description: '安全舒适寄养服务', price: 100 }
      ]
    }
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.banner-carousel {
  margin-bottom: 30px;
}

.banner-item {
  height: 400px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 36px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.section {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409EFF;
}

.section-header h2 {
  margin: 0;
  color: #333;
}

.pet-card, .product-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.pet-card:hover, .product-card:hover {
  transform: translateY(-5px);
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.pet-info, .product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
}

.service-card {
  text-align: center;
  margin-bottom: 20px;
}

.service-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.service-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
</style>
